// -----------------------加载模块------------------------
let form = layui.form
let laypage = layui.laypage



// ----------------分页获取数据并且渲染数据-----------------------
//-----------获取数据需要参数 需要分页页码和显示多少数据
let data = {
    pagenum: 1, //分页器页码,1表示获取第一页的数据
    pagesize: 3, //一页显示多少条数据,后面的数是多号表示显示多少条数据
}

function rendererList() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function(res) {
            // console.log(res);
            // 获取并渲染
            let str = []
            res.data.forEach(item => {
                str.push(`  <tr>
                                  <td>${item.title}</td>
                                  <td>${item.cate_name}</td>
                                  <td>${item.pub_date}</td>
                                  <td>${item.state}</td>
                                  <td>
                                  <a href="../../add/edit.html?id=${item.id}" class="layui-btn">编辑</a>
                                  <button type="button" data-id=${item.id}  id="del_btn" class="layui-btn  layui-btn-xs  layui-btn-danger">删除</button>
                                  </td>
                              </tr>
                    `)
                $('tbody').html(str.join(''))
            });

            laypageData(res.total) // 为了分页器能调用res.total
        }
    })
}
rendererList()



// -----------------------分页器模块------------------------
//    layui.use('laypage', function() {})  如果加载的是layui.all.js 那么是不需要这行代码的
//执行一个laypage实例
function laypageData(t) {
    laypage.render({
        elem: 'pagetool', //注意，这里的 test1 是 ID，不用加 # 

        count: t, //数据总数，从服务端得到  这个参数是从服务器获取的total参数 但是不能使用全局变量直接写res.total 因为定义全局变量属于同步操作  分页器获取数据也属于同步操作  而res.data属于ajax异步操作 是无法使用数据的 
        //------- 解决方法  要么给laypage.render封装成函数 然后传参  要么直接放到渲染数据的success中

        limit: data.pagesize, //limit是每页显示多少条数据 
        // 这里是每页显示3  一共有t条数据 那么就是显示t/3页

        limits: [2, 3, 5, 10], //每页显示多少天数据的选项 配合layout使用

        curr: data.pagenum, //curr意思是当前页 当前页设置为显示第一页的数据

        // next: '>>>', //改变下箭头的样式  prev是上箭头样式的意思

        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 自定义分页器的样式 //skip快速跳转 //count 共多少条数据



        //------------------分页器切换显示对应页数的数据效果------------------------
        jump: function(obj, first) {

            //首次不执行   为了不让页面一刷新就触发 所以在这里面执行
            if (!first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log('当前页', obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log('每页显示的数据条数', obj.limit); //得到每页显示的条数

                // -------------------------------------------------
                //  点击第几页就获取第几页的数据 那么就是点击第几页然后让data.pagenum的值从新赋值为当前页面得数,然后在重新渲染,这样就能得到点击页的数据了

                data.pagenum = obj.curr //obj.curr就是当前点击的第几页
                data.pagesize = obj.limit //obj.limit就是点击的当前页显示多少条数据
                rendererList() //最后再次渲染即可
            }
        }

    });
}
laypageData()


//---------------------------------筛选列表-------------------------------------
$.ajax({
    url: '/my/category/list', //是获取分类 不是文章
    success: function(res) {
        // console.log(res);
        let str = []
        res.data.forEach(item => {
            str.push(`<option value="${item.id}">${item.name}</option>`)
        })
        $('#the_list').append(str.join('')) //不要用html()渲染 不然会把默认的'全部分类'给渲染掉
            //更新渲染
        form.render('select') //动态插入的 所以需要layui的渲染
    }
})


//-------------------点击筛选按钮 筛选想要的分类------------
$('#select_form').on('submit', function(e) {
    e.preventDefault()
    let state = $('select[name=category]').val() // state 根据文章状态筛选；可填“已发布”或“草稿”
    let cate_id = $('#the_list').val() //cate_id 如3表示只获取分类id为3的文章
    console.log(state, cate_id);


    //如果选择了选项那么就有参数 那么data.state就被赋值  如果没有就删除data.state属性 cate_id也如此
    if (state) {
        data.state = state
    } else {
        delete data.state
    }
    if (cate_id) {
        data.cate_id = cate_id
    } else {
        delete data.cate_id
    }
    //    别把获取的参数搞混!


    rendererList()
})


//--------------点击删除删除按钮所在的文章------------
$('tbody').on('click', '#del_btn', function() {
    let id = $(this).data('id')
    $.ajax({
        url: '/my/article/delete/' + id,
        success: function(res) {
            // console.log(res);
            rendererList()
        }
    })
})